
<section class="home">
<div class="block">
  
  <el-carousel height="422px">
    <el-carousel-item   v-for="(item,index) in banner" :key="index">
     <img :src="item.img" alt="">
    </el-carousel-item>
  </el-carousel>
</div>
<!-- 首页列表 -->
<div class="home_list">

  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="type" label="分类" >
          </el-table-column>
          <el-table-column prop="marknum" class-name="grade" label="牌号" >
          </el-table-column>
            <el-table-column prop="company" label="厂家">
            </el-table-column>
          <el-table-column prop="num" label="数量（吨)" width="110">
            <template slot-scope="scope">
              <span :class="{'goodColo':scope.row.num==='无货'?true:false}">{{scope.row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="交货地">
          </el-table-column>
          <el-table-column prop="sendway" label="交货方式">
          </el-table-column>
          <el-table-column prop="updatetime" label="更新时间" width="120">
              <template slot-scope="scope">
                {{scope.row.updatetime}}分钟前
              </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" sortable width="150" >
             <template slot-scope="scope">
                <p class="price_color">￥{{scope.row.price}}吨</p>
                 <img src="../../assets/img/trend.png">
                  
             </template>
          </el-table-column>
          <el-table-column prop="updown" sortable label="涨跌">
              <template slot-scope="scope">
              <p class="upColor" v-if="scope.row.updown && scope.row.updown.indexOf('↑') > -1 ">{{ scope.row.updown }}</p>
              <p class="downColor" v-else>{{ scope.row.updown }}</p>
              </template>
          </el-table-column>
          <el-table-column prop="" label="" width="50">
          
                <template slot-scope="scope">
                  <span class="">
                    <img src="../../assets/img/rest.png" alt="">
                   
                  </span>
                </template>
              
          </el-table-column>
            <el-table-column prop="" label="" width="50">
              <template slot-scope="scope">
              <span><img src="../../assets/img/service.png" alt=""></span>
              </template>
            </el-table-column>
              <el-table-column prop="" label="" width="130">
                        <template slot-scope="scope">
                          <span>
                            <el-button type="primary" size="medium">立即采购</el-button>
                          </span>
                        </template>
              </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>


</div>
<!-- 最新公司 -->
<div class="h_company">
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
      <el-row :gutter="22"> 
        <el-col :span="12" v-for="(item,index) in company" :key="index">
            <div class="com_boxone">
             <span class="com_img"><img :src="item.logo" alt=""></span> 
              <div class="com_con">
                 <h4 class="com_name">{{item.name}}</h4>
                 <span class="com_bq"><img src="../../assets/img/rz.png" alt=""></span>
                 <p>{{item.address}}</p>
                 <p>{{item.employees}}</p>
                 <p>工程塑料、{{item.category}}</p>
                 <p>主营产品：{{item.product}}</p>
                 <router-link tag="div" to="/customer" class="com_cust">查看详情</router-link>
              </div>
            </div>
           
        </el-col>

      </el-row>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    
</div>
<!-- 最新专家 -->
  <div class="home_expert">
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
      <el-row>
        <el-col :span="6"  v-for="(item,index) in expertList" :key="index">
          <div class="exp_box">
                   <div class="exp_head">
                       <span class="exp_img"><img :src="item.expertImg" alt=""></span>
                   <span class="exp_naem">{{item.name}}</span>
                   <span class="exp_vip"><img src="../../assets/img/vip.png" alt=""></span>
                   </div>
                   <div class="direction">
                     <p class="dire">{{item.introduce}}</p>   
                     <p class="dirtow">{{item.descrtion}}</p>
                     <p class="price">收费：70元/次 <span class="time">70元/一分钟</span></p>
                     
                    </div>
                  <router-link tag="div" to="" class="btn">电话咨询</router-link>
                  <router-link tag="div" to="" class="btn btn_tw">网上咨询</router-link>


          </div>
        </el-col>
       
      
      
      </el-row>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</section>

